<template>
  <el-table :data="pagedData" border stripe
    style="width: 100%; font-size: 12px; margin-top: 10px" :empty-text="'暂无数据'">
    <el-table-column prop="enterpriseName" label="企业名称" show-overflow-tooltip></el-table-column>
    <el-table-column prop="legalRepresentative" label="法定代表人" show-overflow-tooltip></el-table-column>
    <el-table-column prop="position" label="职务" show-overflow-tooltip></el-table-column>
    <el-table-column prop="regCreditCode" label="统一社会信用代码" show-overflow-tooltip></el-table-column>
    <el-table-column prop="enterpriseStatus" label="企业状态" show-overflow-tooltip></el-table-column>
    <el-table-column label="是否异常" show-overflow-tooltip>
      <template #default="scope">
        <span :style="{
          color: scope.row.isException === '异常' ? '#f56c6c' : '#67c23a',
          fontWeight: 'bold',
        }">
          {{ scope.row.isException || "否" }}
        </span>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    v-if="data.length > pageSize"
    style="margin-top: 10px; text-align: center"
    background
    layout="prev, pager, next, jumper, total"
    v-model:current-page="currentPage"
    :page-size="5"
    :total="data.length"/>
</template>

<script setup>
import { ref, watch, computed } from "vue";
const data = ref([]);
const currentPage = ref(1);
const props = defineProps({
    data: {
        type: Array,
        default: () => [],
    },
    pageSize: {
        type: Number,
        default: 10,
    },
});

watch(() => props.data, _data => {
  data.value = _data || [];
}, { immediate: true });

const pagedData = computed(() => {
    const start = (currentPage.value - 1) * props.pageSize;
    return data.value.slice(start, start + props.pageSize);
});

</script>